<template>
  <div class="changePassword">
    <el-form
      label-position="left"
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="当前密码" prop="nowPass">
        <el-input
          type="password"
          v-model="ruleForm.nowPass"
          autocomplete="off"
          :maxLength="16"
          placeholder="输入旧密码进行验证"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input
          type="password"
          v-model.trim="ruleForm.pass"
          autocomplete="off"
          :maxLength="16"
          placeholder="密码限制8~16，由数字、大写字母、小写字母，特殊符号3种或3种以上组合组成"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input
          type="password"
          v-model.trim="ruleForm.checkPass"
          autocomplete="off"
          :maxLength="16"
          placeholder="确认新密码"
        ></el-input>
      </el-form-item>
      <el-form-item class="submit-item">
        <el-button type="primary" size="medium" @click="submitForm('ruleForm')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { setTimeout } from "timers";
export default {
  data() {
    // var validatePass = (rule, value, callback) => {
    //   if (value === "") {
    //     callback(new Error("请输入密码"));
    //   } else if (value.toString().length < 6 || value.toString().length > 16) {
    //     callback(new Error("密码由6~16位英文、数字、下划线组成"));
    //   } else {
    //     if (this.ruleForm.checkPass !== "") {
    //       this.$refs.ruleForm.validateField("checkPass");
    //     }
    //     callback();
    //   }
    // };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        nowPass: "",
        pass: "",
        checkPass: ""
      },
      rules: {
        // nowPass: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
        // pass: [{ required: true, validator: validatePass, trigger: "blur" }],
        nowPass: [{ required: true, message: "请输入旧密码", trigger: 'blur'}],
        pass: [{ required: true, pattern: this.rules.strongPwd.reg, message: this.rules.strongPwd.msg, trigger: 'blur'}],
        checkPass: [
          { required: true, pattern: this.rules.strongPwd.reg, message: this.rules.strongPwd.msg, trigger: 'blur'},
          { validator: validatePass2, trigger: "blur" }
        ]
      },
      casFlag: false, //是否是单点登录
      longSocket:null
    };
  },
  created() {
    this.checkCas();
  },
    beforeDestroy () {
        if(this.longSocket){
            this.longSocket.close(); 
        }
    },
  methods: {
    // 判断当前是否单点登录跳
    checkCas() {
      let success = res => {
        if (res.data == "yes") {
          this.casFlag = true;
        } else {
          this.casFlag = false;
        }
      };
      this.$ajax.get("api/login/get_use_single_login", {
        params: {},
        func: { success: success }
      });
    },
    // 表单提交验证
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.changePass();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //验证通过，请求接口
    changePass() {
      let success = res => {
        this.initWS();
        this.loginOut();
      };
      this.$ajax({
        url: "api/login/changepass",
        method: "put",
        data: {
          nowPass: this.ruleForm.nowPass,
          newPass1: this.ruleForm.pass,
          newPass2: this.ruleForm.checkPass
        },
        func: { success: success }
      });
    },
    // 退出登录
    loginOut() {
      this.$message.success("密码修改成功");
      setTimeout(() => {
        let success = res => {
          let host = sessionStorage.getItem("host_addr");
          if (this.casFlag == false) {
            window.location.href = host + "/index/login/index";
          } else {
            // 单点登录
            window.location.href =
              host + "/cas/login?lastpage=" + host + "/index";
          }
        };
        this.$ajax({
          url: "api/login/login",
          method: "delete",
          params: {},
          func: { success: success }
        });
      }, 3000);
    },
    initWS(){
        let webSocketURL = 'ws:' + this.BASE_URL.split(':')[1] + ":7474";
        this.longSocket = new WebSocket(webSocketURL);

        this.longSocket.onopen = ((res) => {
            let params = {
                type: "edit_login",
                token: localStorage.getItem('logintoken'),
                terminal_type: 1,
                delete_userid: this.$g.user_id,
            }

            this.longSocket.send(JSON.stringify(params));
        });
        this.longSocket.onmessage = (res => {});
        this.longSocket.onclose = (res => {})
    }
  }
};
</script>
<style lang="scss">
.changePassword {
  padding-top: 50px;
  .submit-item {
    padding-top: 50px;
    text-align: center;
  }
}
.el-form-item__error {
    width:500px
}
</style>